<script setup lang="ts">
import { reactive } from "vue";

defineOptions({
  name: "PieLine"
});

// 使用最简单的配置结构，避免类型错误
const config = reactive({
  // 数据必须包含 name 和 value 字段
  data: [
    {
      name: "抖音",
      value: 550
    },
    {
      name: "快手",
      value: 120
    },
    {
      name: "哔哩哔哩",
      value: 78
    },
    {
      name: "YouTube",
      value: 660
    },
    {
      name: "小红书",
      value: 80
    },
    {
      name: "微博",
      value: 280
    },
    {
      name: "微信视频号",
      value: 100
    },
    {
      name: "今日头条",
      value: 220
    },
    {
      name: "其他",
      value: 100
    }
  ],
  radius: 85,
  lineWidth: 30
});

// 添加自定义样式
const style = reactive({
  width: "100%",
  height: "300px"
});

// 添加一个获取颜色的方法
const colors = [
  "#00baff",
  "#3de7c9",
  "#FFC530",
  "#FF7B7B",
  "#58D5FF",
  "#29D8FF",
  "#A77BFF",
  "#FF95F8",
  "#D1FF42"
];

const getColor = index => {
  return colors[index % colors.length];
};
</script>

<template>
  <div class="nio-box">
    <div class="nio-title">
      <dv-decoration-7
        :color="['#3183b8', '#3183b8']"
        style="width: 200px; height: 30px"
      >
        各大平台活跃度
      </dv-decoration-7>
    </div>

    <div class="chart-container">
      <!-- 添加手动图例，放在左侧 -->
      <div class="custom-legend">
        <div
          v-for="(item, index) in config.data"
          :key="index"
          class="legend-item"
        >
          <span
            class="color-block"
            :style="{ backgroundColor: getColor(index) }"
          />
          <span class="legend-text">{{ item.name }}: {{ item.value }}</span>
        </div>
      </div>

      <!-- 使用最简单的配置方式 -->
      <dv-active-ring-chart :config="config" class="ring-chart" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./src/style/index.scss");

.nio-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.nio-title {
  margin-bottom: 10px;
}

.chart-container {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(100% - 40px);
}

.ring-chart {
  flex: 1;
  height: 100%;
}

.custom-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  width: 150px;
  padding: 0 20px;

  .legend-item {
    display: flex;
    align-items: center;

    .color-block {
      width: 12px;
      height: 12px;
      margin-right: 6px;
      border-radius: 2px;
    }

    .legend-text {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: #fff;
      white-space: nowrap;
    }
  }
}
</style>
